import MapA from "@/map_data/Map_A"
import AttackProperty from "./components/AttackProperty"
import AttackSource from "./components/AttackSource"
import AttackTrend from "./components/AttackTrend"
import AttackType from "./components/AttackType"
import BugSituation from "./components/BugSituation"
import DisposalSituation from "./components/DisposalSituation"
import WarningData from "./components/WarningData"
import useGetData from "./hooks/useGetData"
import CenterHead from "./components/CenterHead"

const Perception = () => {

  const { SelectNode } = useGetData()

  return <div className="h-[955px] flex justify-between gap-[24px]">
    <div className="main-box w-[400px] h-full pt-[14px] pl-[8px] pr-[8px]">
      <AttackTrend />
      <AttackType />
      <AttackSource />


    </div>
    <div className="flex-1 flex flex-col relative">
      <div className="w-full h-[380px] mt-[140px] bg-[#b19494] pointer-events-auto">
        <MapA />
      </div>


      <div className="w-full h-full flex flex-col justify-between absolute pointer-events-none" >
        <div className="w-full h-[180px] flex flex-col gap-[16px] pl-[34px] pr-[34px] pt-[12px]">
          {SelectNode}
          <CenterHead />
        </div>
        <div className="main-box pt-[14px] pl-[8px] pr-[8px] pointer-events-auto">
          <WarningData />
        </div>
      </div>

    </div>
    <div className="main-box w-[400px] h-full pt-[14px] pl-[8px] pr-[8px]">
      <AttackProperty />
      <DisposalSituation />
      <BugSituation />
    </div>
  </div>
}

export default Perception